<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js"></script>
		<link rel="stylesheet" href="./lib/animate.css"/>
		<style>
			li{
				border: 1px dashed #999;
				margin: 10px;
				line-height: 40px; /* 属性设置行间的距离（行高） */。
				padding: 10px;
				font-size: 16px;
				width: 100%;
			}
			li:hover{
				background-color: red;
				transition: all 0.8s ease;
			}
			.v-enter,.v-leave-to{
				opacity: 0;
				transform: translateY(80px);
			}
			.v-enter-active,.v-leave-active{
				transition: all 1s ease; 
			}
			/* .v-move和.v-leave-active配合使用，能够实现列表后续的元素，渐渐地飘上来的效果 */
			.v-move{
				transition: all 1s ease; 
			}
			.v-leave-active{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<label>Id:
					<input type="text" v-model="id" />
				</label>
				<label>Name:
					<input type="text" v-model="name" />
				</label>
				<label>
					<input type="button" value="添加" @click="add" />
				</label>
			</div>
			<!-- <ul> -->
				<!-- 在实现列表过度的时候，如果需要的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要用transition-group -->
				<!-- 如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 ：key属性 -->
				<!-- 给transition-group添加 appear属性，实现页面展示入场效果 -->
				<!-- transition-group 添加tag="ul" 属性 指定transition-group渲染的为指定的元素，如果不指定tag属性，默认，渲染span标签，不符合li的属性啦-->
				<transition-group appear tag="ul">
					<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
						{{item.id}}----------------{{item.name}}
					</li>
				</transition-group>
			<!-- </ul> -->
			
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					id: '',
					name:'',
					list:[
						{id: 1,name: '赵高'},
						{id: 2,name: '魏延'},
						{id: 3,name: '严嵩'},
						{id: 4,name: '和珅'},
					]
				},
				methods: {
					add(){
						this.list.push({id:this.id,name:this.name})
						this.id=this.name=''
					},
					del(i){
						this.list.splice(i,1)
					}
				}
			})
		</script>
	</body>
</html>
